<script setup>

</script>

<template>
    <h2 class="vip"><span>我的会员</span>
        <p>有效至2023-01-03</p>
    </h2>

    <el-row :gutter="20">


        <el-col :span="8">
            <el-card :body-style="{ padding: '0px' }">
        <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          class="image"

        />
        <div style="padding: 14px" class="info">
         <p>新人专享套餐 199</p>
         <p>90天会员</p>
            <el-button  type="success"><RouterLink active-class="active" to="/pay/:199">立即购买</RouterLink></el-button>
        </div>
      </el-card>
        </el-col>


        <el-col :span="8">
            <el-card :body-style="{ padding: '0px' }">
        <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          class="image"

        />
        <div style="padding: 14px" class="info">
         <p>豪华年费套餐套餐 299</p>
         <p>360天会员</p>
         <el-button  type="success"><RouterLink active-class="active" to="/pay/:299">立即购买</RouterLink></el-button>

        </div>
      </el-card>
        </el-col>
        
        <el-col :span="8">
            <el-card :body-style="{ padding: '0px' }">
        <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          class="image"

        />
        <div style="padding: 14px" class="info">
         <p>新人专享套餐 399</p>
         <p>180天会员</p>
         <el-button  type="success"><RouterLink active-class="active" to="/pay/:399">立即购买</RouterLink></el-button>

        </div>
      </el-card>
        </el-col>
       
    </el-row>
</template>

<style scoped lang="scss">

.info{
    text-align: center
}
.vip {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #27ba9b;
    color: white;
}


.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.image{
    clear: both;
    display: block;
    margin: auto;
}
</style>